<template>
  <div class="Mainbox">
      <!-- 收货地址 -->
    <heads v-show="!postadr" class="HeadTop1">
        <i @click="zhu1()"></i>
        <span>收货地址</span>
        <em @click="postAdr()">添加新地址</em>
    </heads>
    <!-- 收货地址1 -->
    <heads v-show="postadr" class="HeadTop1">
        <i @click="zhu2()"></i>
        <span>添加新地址</span>
        <em @click="postend()">完成</em>
    </heads>
    <mains>
        <!-- 收货地址 -->
        <div class="main" v-show="postadr1">
            <div class="madr"></div>
            <div class="adBtn" @click="postAdr()">添加新地址</div>
        </div>
        <!-- 收货地址1 -->
        <div class="main1" v-show="postadr2">
            <h2 class="w">请使用您的真实姓名，否则订单将无法发出</h2>
            <div class="main1One">
                <input class="w" type="text" placeholder="请填写真实姓名" @input="insert()" v-model="name">
            </div>
            <div class="main1Two">
                <template v-for=" (text,index) in arr" >
                    <div :key="index" class="mainto">
                        <input class="w" type="text" :placeholder="text" v-if="index!=1">
                        <div v-if="index==1" class="w" @click="changes()">{{text}}<i></i></div>
                    </div>
                </template>
            </div>
        </div>
        <!-- 收货地址2 -->
        <div class="main2" v-show="!postadr3">
            <div>
                <ul>
                    <li v-for="(item,ins) in arr1" :key="ins" @click="postchan(ins)">
                        <div class="mainOne  w">
                            <div class="mo1">
                                <span>{{item.name}}</span>
                                <span>{{item.tel}}</span>
                            </div>
                            <div class="mo2">
                                <span>{{item.str}}</span>
                                <span>邮编{{item.bian}}</span> 
                            </div>
                        </div>
                        <div class="mainTwo w">
                            <span class="mT1"><i :class="tt==ins?'mtaa':''"></i>默认地址</span>
                            <span class="mT2"><i></i>编辑</span>
                            <span class="mT3"><i></i>删除</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        
    </mains>
      <!-- 遮罩 -->
    <zhe v-show="bol">
        <!--省市区三级联动-->
        <div class="sanld">
            <h3><span @click="sanld1()">取消</span><span  @click="sanld2()">确定</span></h3>
            <div class="santit">
                <template>
                  <span v-show="tit">
                    <span class="titone" >{{item1}}</span>
                    <span class="titone">{{item2}}</span>
                    <span class="titone">{{item3}}</span>
                  </span>
                </template>
                <span v-show='bb' class="tt">请选择</span>
            </div>
            <!-- 内容一 -->
            <div class="list">
                <div class="sanOnet" v-show="!sOne">
                    <!-- <template v-for="(it1,iv2) in options">
                        <div :key="iv2" @click="change1(iv2)">{{it1.label}}</div>
                    </template> -->
                    <template v-for="(it1,iv2) in addr">
                        <div :key="iv2" @click="change1(iv2)">{{it1.name}}</div>
                    </template>
                </div>
                <div class="sanTwot" v-show="sTwo">
                    <template v-for="(sit1,c1) in aa1">
                        <div :key="c1" @click="change2(c1)">{{sit1.name}}</div>
                    </template>
                </div>
                <div class="sanThreet" v-show="sThree">
                    <template v-for="(sit2,c2) in aa2">
                        <div :key="c2" @click="change3(c2)">{{sit2.name}}</div>
                    </template>

                </div>
            </div>
        </div>
        
    </zhe>

  </div>
</template>

<script>
import axios from 'axios';
import Head from './Head.vue';
import Main from './Main.vue';
import Ald from '../Ald.vue';
export default {
    name:'Address',
    data(){
        return{
            tit:false,
            bb:true,
            bol:false,
            postadr:false,
            postadr1:false,
            postadr2:false,
            postadr3:false,
            ser:[],
            san1:'请选择',
            san2:'请选择',
            san3:'请选择',
            obj:['请选择','请选择','请选择'],
            item1:'',
            item2:'',
            item3:'',
            tt:0,
            sOne:false,
            sTwo:false,
            sThree:false,
            arr:['请填写手机号','请选择城市','请填写详细地址','请填写邮编'],
            name:'',
            arr1:[
                {
                    name:'李四',
                    tel:'1501340708',
                    add:'河南省新乡市红旗区南干道与新中大道交叉口B座10楼102室;',
                    bian:'453000',
                },{
                    name:'李四',
                    tel:'1501340708',
                    add:'河南省新乡市红旗区南干道与新中大道交叉口B座10楼102室;',
                    bian:'453000',
                }
            ],
          
        addr:[
        ],
        aa1:[],
        aa2:[],
            
        }
    },components:{
        'heads':Head,
        'mains':Main,
        'zhe':Ald,
    },
    mounted(){
      // this.datas();
    },
    methods:{
      // 获取地址数据
      datas(){
          axios.get('/add.json').then(res => {     // 获取public下的test.json文件数据
            // console.log(res.data);
            this.addr=res.data;
            // console.log(this.addr);
          });
      },
      // 省
      change1(iv2){
        this.tit=true;
        this.sOne=!this.sOne;
        this.sTwo=!this.sTwo;
        this.$set(this.obj,0,this.addr[iv2].name);
        this.aa1=this.addr[iv2].childs;
        this.item1=this.addr[iv2].name
      },
      // 市
       change2(iv2){
         this.sTwo=!this.sTwo;
         this.sThree=!this.sThree;
         this.$set(this.obj,1,this.aa1[iv2].name);
         this.aa2=this.aa1[iv2].childs;
         this.item2=this.aa1[iv2].name;
       },
       //县
       change3(iv2){
         this.$set(this.obj,2,this.aa2[iv2].name);
         this.item3=this.aa2[iv2].name;
         console.log(this.aa2[iv2].name);
         this.bb=false;
       },
        postAdr(){
            this.postadr1=false;
            this.postadr2=true;
            this.postadr3=true;
            this.postadr=!this.postadr;
        },
        // 取消选择地区
        sanld1(){
            this.bol=!this.bol;
        },
        // 确定选择的地区
        sanld2(){
          let str=this.item1+this.item2+this.item3;
          this.bol=!this.bol;
          console.log(this.str);
          this.$set(this.arr,1,str);
        },
        // 地址提交调接口
        postend(){

        },
        changes(){
            this.datas();
            this.bol=!this.bol;
            console.log(this.bol);
        },
        postchan(ins){
          console.log(ins);
          this.tt=ins;

        },
        zhu1(){
            this.$router.replace('/login');
        },zhu2(){
            this.postadr=!this.postadr;
        },insert(){
            console.log(this.name);
        },
       
    }
}


</script>

<style scoped>
.list {
  width: 100%;
  height: 40rem;
  overflow:scroll;
  background-color: #fff;
}
.list div{
    text-align: left;
    font-size: 3rem;
}
.list div div{
    line-height: 6.6rem;
    width: calc(100% - 4rem);
    padding: 0 2rem;
    border-bottom: 0.1rem solid #cccccc;
}
/*  三级联动*/
.sanld{
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    height: 60rem;
}
.sanld h3{
    line-height: 9rem;
    height: 9rem;
    border-bottom: 0.1rem solid #ccc;
    display: flex;
    font-size: 3rem;
    font-weight: normal;
}
.sanld h3 span{
    flex: 1;
}
.sanld h3 span:nth-child(1){
border-right: 0.1rem solid #ccc;
}
.santit{
    width: calc(100% - 4rem);
    padding: 0 2rem;
    text-align: left;
    font-size: 3rem;
    display: inline-block;
    height: 7rem;
    line-height: 7rem;
    /* background-color: #f0f; */
}
.santit .titone{
  margin-right: 2rem;
}
.santit span.tt{
    display: inline-block;
    height: 6.8rem;
    line-height: 6.8rem;
    margin-right: 2rem;
    border-bottom: 0.2rem solid #e54e32;
    color: #e54e32;
}
.santit .sanOne,.santit .sanTwo,.santit .sanThree{
    border-bottom: none;
    color: #4c4c4c;
}

/*遮罩层*/
.blacks {
  position: fixed;
  width: 100%;
  height: 50%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.45);
}
/*省市区三级联动*/
.divwrap {
  height: 50%;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 99;
}

/*外部*/
.divwrap > .distpicker-address-wrapper {
  color: #0d0d0d;
  height: 100%;
}

/*头部*/
.divwrap >>> .address-header {
  background: #000;
  color: #fff;
  width: 100%;
  position: fixed;
  bottom: 50%;
  height: 0.5rem;
  font-size: 0.2rem;
}

/*头部内容*/
.divwrap >>> .address-header ul li {
  flex-grow: 1;
  text-align: center;
}

/*选择过省市区的头部*/
.divwrap >>> .address-header .active {
  color: #fff;
  border-bottom: 0.05rem solid #666;
}

/*内容部分*/
.divwrap >>> .address-container {
  overflow: scroll;
  height: 100%;
}

/*点过的地区内容*/
.divwrap >>> .address-container .active {
  color: red;
}
/*  */
.w{
    width: calc(100% - 4rem );
    padding: 0 2rem ;
}
/* 收货地址2 */
.main2 ul {
    margin-top:0.1rem;
    width: 100%;
}
.main2 ul li{
    background-color: #fff;
    margin-bottom: 2rem;
}
.main2 .mainOne .mo1{
    font-size: 2.8rem;
    height: 6.7rem;
    line-height: 6.7rem;
    color: #4c4c4c;
    text-align: left;
}
.main2 .mainOne .mo1 span:nth-child(1){
    margin-right: 9rem;
}
.main2 .mainOne .mo2{
    padding: 0.6rem 0 1.2rem;
    font-size: 2.4rem;
    line-height: 3.6rem;
    color: #808080;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    text-align: left;
    white-space: wrap;

}
.main2 .mainTwo{
    border-top: 0.1rem solid #ccc;
    font-size: 2.4rem;
    height: 8rem;
    line-height: 8rem;
    color: #4c4c4c;
    position: relative;
}
.main2 .mainTwo span{
    height: 100%;
    position: absolute;
}
.main2 .mainTwo .mT1{
    left: 6.5rem;
}
.main2 .mainTwo .mT2{
    right: 16rem;
}
.main2 .mainTwo .mT3{
    right: 3.4rem;
}
.main2 .mainTwo span i{
    position: absolute;
    top: calc(50% - 1.5rem);
    height: 3rem;
    width: 3rem;
}
.main2 .mainTwo .mT1 .mtaa{
    left: -4.4rem;
    background: url(../../assets/user/red.png) no-repeat 0 0;
}
.main2 .mainTwo .mT1 i{
    left: -4.4rem;
    background: url(../../assets/user/red1.png) no-repeat 0 0;
}
.main2 .mainTwo .mT2 i{
    right: 6rem;
    background: url(../../assets/user/ed.png) no-repeat 0 0;
}
.main2 .mainTwo .mT3 i{
    right: 6rem;
    background: url(../../assets/user/de.png) no-repeat 0 0;
}
/* 收货地址1 */
.main1 h2{
    line-height: 7rem;
    height: 7rem;
    font-size: 2.4rem;
    color: #e53e42;
    text-align: left;
}
.main1 .main1One{
    height: 10rem;
    width: 100%;
    line-height: 10rem;
    margin-bottom: 2rem ;
}
.main1 div input{
    font-size: 2.8rem;
    color: #808080;
    /* width: 100%; */
    height: 9.8rem;
    border-bottom: 0.1rem solid #ccc;
    border-top: 0.1rem solid #ccc;

}
.main1 .mainto div{
    font-size: 2.8rem;
    color: #808080;
    height: 9.8rem;
    line-height: 9.8rem;
    border-bottom: 0.1rem solid #ccc;
    border-top: 0.1rem solid #ccc;
    position: relative;
    background-color: #fff;
    text-align: left;
}
.main1 .main1Two .mainto{
    width: 100%;
    position: relative;
}
.mainto i{
    position: absolute;
    top: calc(50% - 1.5rem);
    right: 2rem;
    height: 3rem;
    width: 1rem;
    background: url(../../assets/user/user-yjian.png) no-repeat 0 0;
}
/* 添加新地址 */
.main{
    padding-top: 21rem;
}
.main div{
    margin: 0 auto;
}
.main .madr{
    height:20rem ;
    width: 20rem;
    background: url(../../assets/user/user-adress.png) no-repeat 0 0;
    margin-bottom: 4.8rem;
}
.main .adBtn{
height: 5.6rem;
width: 23.6rem;
border-radius: 5.6rem;
border: 0.2rem solid #4c4c4c;
color: #4c4c4c;
font-size: 3rem;
line-height: 5.6rem;
text-align: center;
}
/* 公用 */
.Mainbox{
    font-size: 0;
}
.HeadTop1 i:nth-child(1){
    height: 3.8rem;
    width: 3.8rem;
    position: absolute;
    top: 50%;
    left: 1.3rem;
    transform: translateY(-1.9rem);
    background: url(../../assets/user/user-wback.png) no-repeat 0 0;
}
.HeadTop1 em{
    height: 9.6rem;
    line-height: 9.6rem;
    position: absolute;
    right: 2rem;
    top: 0;
    font-size: 3rem;
}

</style>